<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div class="app">
        <form action="">
            <p><label for="">姓名：<input type="text" v-model="form.name"></label></p>
            <p><label for="">年龄：<input type="number" v-model="form.age"></label></p>
            <p><label for="">性别：
                <input type="radio" name="sex" value="男" v-model="form.sex">男
                <input type="radio" name="sex"  value="女" v-model="form.sex">女
            </label></p>
            <p><label for="">爱好：
                <input type="checkbox" value="唱歌" v-model="form.hobby">唱歌
                <input type="checkbox" value="跳舞" v-model="form.hobby">跳舞
                <input type="checkbox" value="篮球 " v-model="form.hobby">篮球
            </label></p>
            <button @click="submit">提交</button>
            <button @click="reset"> 重置</button>
        </form>
        <hr />
        {{form}}
    </div>
    
    <script>
        let vm=new Vue({
            el:'.app',
            data:{
                form:{
                    name:'',
                    age:'',
                    sex:'',
                    hobby:[],
                }
            },
            methods:{
                submit(){
                    console.log(this.form)
                },
                   reset(){
                    this.form={
                        name:'',
                        age:'',
                        sex:'',
                        hobby:[]
                    }
                }
            }
             
        })
        console.log(vm)
    </script>
</body>
</html>